# Component: Media Archives

Multi-display collection wrapper for media streams

Collection Block

### BEM Anatomy

| Type      | Class Name            | Description                                                                                 |
| --------- | --------------------- | ------------------------------------------------------------------------------------------- |
| ==Block== | `.as-media-archives`  | The primary wrapper. Hosts display-type modifiers.                                          |
| Modifier  | `--list`              | Displays media items in a vertical stack, typically for dense data views.                   |
| Modifier  | `--card`              | Displays media items as a responsive grid of tiles, emphasizing thumbnails.                 |
| Element   | `__item`              | The individual media entry within the collection.                                           |
| Modifier  | `__item--active`      | Highlights a specific item, such as the currently playing video in a persistent collection. |
| Element   | `__row`               | The internal grid wrapper. Resets or customizes Bootstrap gutters for consistent alignment. |
| Element   | `__column`            | The grid cell (responsive column) wrapping the media item renderer.                         |
| Element   | `__content`           | The wrapper for text metadata (Title, Description) inside the item.                         |
| Element   | `__title`             | The heading for the media item; usually handles font weight and line clamping.              |
| Element   | `__description`       | Summary text or excerpt for the media item, often hidden in compact view modes.             |
| Element   | `__pagination`        | Container for "Load More" controls. Centers content and provides top spacing.               |
| Element   | `__button`            | Base button styling for collection-level interactions.                                      |
| Modifier  | `__button--load-more` | Specific style for the pagination trigger, potentially adding a spinner icon.               |
| Element   | `__state`             | Contextual container for `--loading` or `--empty` scenarios.                                |
| Modifier  | `__state--loading`    | Specific styling (e.g., skeleton screens or opacity shifts) for the fetching state.         |
| Modifier  | `__state--empty`      | Styling for the "No media found" message, often including an icon or call to action.        |

### Selection & Display States

The component identifies the currently viewed stream by comparing `CreationTicks`, applying the `--active` modifier to the relevant child component. This modifier highlights the item by changing its border color to the theme's primary variable.

##### Generated HTML (Card Grid)

```html
<div class="as-media-archives as-media-archives--card">
    <div class="as-media-archives__row row">
        <div class="as-media-archives__column col-md-4">
            <div class="as-media-archives__item as-media-archives__item--active">
                <!-- Stream Card -->
            </div>
        </div>
    </div>
</div>
```

##### SCSS

```scss
.as-media-archives {
  &__item {
    &--active {
      // Direct visual feedback for 
      // the currently selected stream
      border-color: var(--bs-primary);
    }
  }

  &__pagination {
    text-align: center;
    margin-top: 1.5rem;
  }
}
```
